<include file='Public:header'/>
<script src="__JS__/jquery.form.js"></script>
<script type="text/javascript">

// Form Validation

$(document).ready(function(){
    //$("#captcha").attr("autocomplete", "off");


    function clear_form_elements(ele) {
        $(ele).find(':input').each(function() {
            switch(this.type) {
                case 'password':
                case 'select-multiple':
                case 'select-one':
                case 'text':
                case 'textarea':
                    $(this).val('');
                    break;
                case 'checkbox':
                case 'radio':
                    this.checked = false;
            }
        });
    }

    $("#send_message").click(function(e){

        // Stop the form from being submitted
        e.preventDefault();

        /* Declare the variables, var error is the variable that we use on the end
        to determine if there was an error or not */
        var error = false;
        var name = $("#name").val();
        var email = $("#email").val();
        var subject = $("#subject").val();
        var message = $("#message").val();

        /* In the next section we do the checking by using VARIABLE.length
        where VARIABLE is the variable we are checking (like name, email),
        length is a javascript function to get the number of characters */

        if(name.length == 0){
            var error = true;
            $("#name_error").fadeIn(500);
        }else{
            $("#name_error").fadeOut(500);
        }

        // Validate Email addresses with a JavaScript Regular Expression
        var emailPattern = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/; 
        if(!emailPattern.test(email)){
            var error = true;         
            $("#email_error").fadeIn(500);   
        }else{   
            $("#email_error").fadeOut(500);
        }

       /* if(captcha.length == 0){
            var error = true;
            $("#captcha_error").fadeIn(500);
        }else{
            $("#captcha_error").fadeOut(500);
        }*/

        if(message.length == 0){
            var error = true;
            $("#message_error").fadeIn(500);
        }else{
            $("#message_error").fadeOut(500);
        }

        // Now when the validation is done we check if the error variable is false (no errors)
        if(error == false){

            /* Using the jquery's post(ajax) function and a lifesaver
            function serialize() which gets all the data from the form
            we submit it to send_email.php */
            $.post("__URL__/send", $("#feedback_form").serialize(),function(e){
                // And after the ajax request ends we check the text returned

                if(e.status == true){
                  if($("#mail_success").fadeIn(500)) {
                        $("#mail_error").hide();
                    }

                    $('#feedback_form')[0].reset();
                    $("#mail_success").delay(8000).fadeOut(500);
                }else{
                    $('#mail_error').find('p').text(e.info);
                    if($("#mail_error").fadeIn(500)) {
                        $("#mail_success").hide();
                    }
                }
                
            },"json");
        }
    });    
});

</script>

    <!-- Start Content -->
    <div id="content">

       <!-- Start Topbar -->
        <div id="contacts" class="top-title">
            <div class="section-title">
                <h2>联系我们 / <em>How to find us</em></h2>
            </div>
        </div>
        <!-- End Topbar -->

        <!-- Start Contact -->
        <div class="sidebars one-half-divider">

            <!-- Start Left Side --> 
            <div class="sidebar one-half-seg left">

                <!-- Start Contact Information -->
                <div class="contacts">
                    <span><strong>总部公司地址</strong><br />宁波市江东区五交化市场16排19号</span>
                    <span><strong>电话:</strong> 0574-87811156<br /><strong>传真:</strong> 0574-87811159</span>
                    <span><strong>Email:</strong> <a href="mailto:info@yourstudioname.com">ztuoreciver@163.com</a></span>
                    <span><strong>联系人:</strong> 姚经理<br /><strong>手机:</strong> (0)13957882581</span>
                </div>
                <!-- End Contact Information -->

                <!-- Start Location Map -->
                <div class="title left-pos"><h2>Location Map</h2></div>

                <div class="location-map">
                    <iframe width="500" height="440" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://j.map.baidu.com/nW4qs"></iframe>
                </div>
                <!-- End Location Map -->
                
                <!-- Start Contact Information -->
                <div class="contacts" style="margin-top: 40px">
                    <span><strong>分部公司地址</strong><br />宁波市江东现代商城一号楼一楼89号</span>
                    <span><strong>电话:</strong> 0574-87951953<br /><strong>传真:</strong> 0574-87951953</span>
                    <span><strong>Email:</strong> <a href="mailto:info@yourstudioname.com"></a></span>
                    <span><strong>联系人:</strong> 王经理<br /><strong>手机:</strong> (0)13105744849</span>
                </div>
                <!-- End Contact Information -->

                <!-- Start Location Map -->
                <div class="title left-pos"><h2>Location Map</h2></div>

                <div class="location-map">
                    <iframe width="500" height="440" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://j.map.baidu.com/JTDqs"></iframe>
                </div>
                <!-- End Location Map -->

            </div>
            <!-- End Left Side --> 

            <!-- Start Right Side -->
            <div class="sidebar one-half-seg right">

                <div class="right-one-half"></div>

                <!-- Start Contact Form -->
                <div class="title right-pos"><h2>留言</h2></div>

                <!-- Start Feedback Form -->
                <div class="feedback-form">

                    <div class="info"><p></p></div>

                    <!-- Start Notifications -->
                    <div id="mail_success" class="success-box"><p>感谢您的留言，你的邮箱已经成功发送</p></div>
                    <div id="mail_error" class="warning-box"><p>Something went wrong.</p></div>
                    <!-- End Notifications -->
                    
                    <!-- Start Form -->
                    <form id="feedback_form" method="post" onsubmit="return false" action="#">

                        <fieldset>
                            <label>你的姓名 <span class="required">(required)</span><span id="name_error" class="error">Please enter your name</span></label>
                            <input type="text" name="name" id="name" value="" />

                            <label>邮箱 <span class="required">(required)</span><span id="email_error" class="error">Enter your email or check the correct entry</span></label>
                            <input type="text" name="email" id="email" value="{$email}" />

                            <label>主题</label>
                            <div class="feedback-field"><input type="text" name="subject" id="subject" value="" /></div>

                            <label>内容 <span class="required">(required)</span><span id="message_error" class="error">Please type your message in the box below</span></label>
                            <textarea name="message" id="message" rows="5" cols="54"></textarea>

                            <div class="feedback-button">
                                <a href="#" class="blue-button" id="send_message">提交</a>
                            </div>
                        </fieldset>

                    </form>
                    <!-- End Form -->

                </div>
                <!-- End Feedback Form -->
		
            </div>
            <!-- End Right Side -->

        <div class="clear"></div>
        </div>
        <!-- End Contact -->

    <div class="horizon-line"></div>
    </div>
    <!-- End Content -->

</div>
<!-- End Wrapper -->

<include file='Public:footer'/>